<template>
    <LayOut :bread="[{
        title: '监控',
    }]">
        <div class="camera-viewer">
            <img :src="imageUrl" alt="Video Stream" />
        </div>
    </LayOut>
</template>
  
<script lang="ts" setup>
import LayOut from '../components/LayOut.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue';
// const ws = new WebSocket('ws://localhost:3000/');

const imageUrl = ref('http://localhost:3000/stream');
// const socket = ref<any>(null);

// const setupSocket = () => {

//     ws.onmessage = (event) => {
//       imageUrl.value = `data:image/jpeg;base64,${event.data}`;
//     };

//     ws.onerror = (error) => {
//       console.error('WebSocket error:', error);
//     };

//     ws.onclose = () => {
//       console.log('WebSocket connection closed');
//     };
// }

// onMounted(() => {
//     setupSocket();
// })

// onBeforeUnmount(() => {
// })
</script>
  
<style lang="less" scoped>
.camera-viewer img {
    max-width: 100%;
    height: auto;
}
</style>